<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户中奖信息</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/base.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 0 30px;
        }
        .container {
            margin-top: 20px;
        }
        .activity-table th, .activity-table td {
            text-align: center;
            vertical-align: middle;
            padding: 10px;
        }
        .activity-table th {
            background-color: #f7f7f7;
        }
        .status {
            font-weight: bold;
        }
        .won {
            color: green;
        }
        .not-won {
            color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 id="userTitle">用户抽奖活动详情</h2>
    <div class="table-responsive">
        <table class="table activity-table">
            <thead>
            <tr>
                <th>活动名称</th>
                <th>获奖时间</th>
                <th>奖品名称</th>
                <th>奖品等级</th>
            </tr>
            </thead>
            <tbody id="activityList">
            <!-- 抽奖活动列表将动态插入这里 -->
            </tbody>
        </table>
    </div>
</div>

<script src="./js/jquery.min.js"></script>
<script>
    var userToken = localStorage.getItem("user_token");
    $(document).ready(function() {
        var urlParams = new URLSearchParams(window.location.search);
        var userId = urlParams.get('userId');

        // 判断是否有 userId
        if (!userId) {
            alert("无效的用户ID");
            return;
        }

        function fetchUserActivityData() {
            $.ajax({
                url: `/user-history/getUserActivities?userId=${userId}`,
                headers: {
                    "user_token": userToken
                },
                type: 'get',
                success: function(result) {
                    if (result.code !== 200) {
                        alert(result.msg);
                    } else {
                        var activities = result.data;
                        $('#userTitle').text(`${activities[0].userName} 的中奖记录详情`);
                        var activityList = $('#activityList');
                        activityList.empty();
                        activities.forEach(function(activity) {
                            activityList.append(`
                                <tr>
                                    <td>${activity.activityName}</td>
                                    <td>${activity.winnerTime}</td>
                                    <td>${activity.prizeName}</td>
                                    <td>${activity.prizeTier}</td>
                                </tr>
                            `);
                        });
                    }
                },
                error: function(err) {
                    if(err!=null && err.status===401){
                        alert("用户未登录或登录过期, 请重新登录!");
                        // 跳转登录页
                        window.location.href = "/lottery_login.html";
                        window.parent.location.href = "/lottery_login.html";//让父页面一起跳转
                    } else {
                        console.log(err);
                        alert("请求失败，请稍后再试");
                    }
                }
            });
        }

        fetchUserActivityData();
    });
</script>
</body>
</html>
